﻿*{
    margin: 0; 
    padding: 0; 
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif ;
}

html, body{
    width:100%;
    height:100%;
}

body{
    font-size: 11px;
    color: #333;
    vertical-align: baseline;
    outline:none;
    overflow: hidden;
}
a{ color: #538DC2; text-decoration: none; }
a:hover{ color:#19558D; text-decoration: underline; }
ol, ul { list-style: none; }
input:focus, select:focus, textarea:focus {
        outline: 0;
}
.float-right{
    float:right;
}


/* Page structure -----------------------------------------------*/
#header
{
    background-image: linear-gradient(bottom, rgb(38,55,91) 0%, rgb(102,125,183) 100%);
    background-image: -o-linear-gradient(bottom, rgb(38,55,91) 0%, rgb(102,125,183) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(38,55,91) 0%, rgb(102,125,183) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(38,55,91) 0%, rgb(102,125,183) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(38,55,91) 0%, rgb(102,125,183) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(38,55,91)),
        color-stop(1, rgb(102,125,183))
    );
    outline:1px solid #4d5c7b;
    border-top:1px solid #839ee2;    
    border-bottom:1px solid #000;
    margin-top: 1px;
    position:relative; 
    height: 42px;
}
#header-inner, #content, #footer { width: 100%; height: 100%; margin: 0px auto;}
#wrapper{ position:relative; height:100%; background-color:#445a77;}  
#left-conteiner {
    position: absolute;
    float:left; 
    width:220px; 
    height:100%;
    border-right : 1px solid #c1c5cf; 
    background-color:#e3e8f1;
   }
    
.left-conteiner-inner{ font-size: 11px; position: absolute; width:220px; height:100%;}
.left-conteiner-inner a{color:black;}
    .side-bar{ padding:7px 0px 0px 0px; position: absolute; width:220px; height:100%;}
        .main-nav{ position:relative; height: 150px;}     
        .main-nav-items{margin-top:4px;}
        .main-nav-items a{ height:30px; }
        .main-nav-ico{
            background-image: url('img/ui-set.png');
            background-repeat: no-repeat;
            outline: none;
            position: absolute;
            text-indent: -99999px;            
            height:17px;
            width:20px;
            margin-top:3px;
            }
            .inbox{ background-position:-38px 0px;}
            .upcoming{ background-position:-58px 0px;}
            .flagged{ background-position :-80px 0px;}
            .alltask{ background-position:-101px 0px;}
            
        .main-nav-items li a span+span {margin-left:30px;}        
        
        .task-count 
        {
            float:right; 
            height:14px; 
            line-height: 13px; 
            margin: 6px 7px 0 0; 
            background-color: #95aac2; 
            color:White; 
            border-radius: 7px; 
            padding: 0 4px;
            text-align: center;
            font-size: 10px;
            min-width: 10px;
            box-shadow: 0 1px 0 White;
        }        
        .task-count-selected 
        {
            background-color: White; 
            color:#335285; 
            box-shadow: 0 -1px 0 #335285;
            }
        
        .main-nav-items li{ height: 24px; margin: 1px 0px 2px 0px; padding: 0px 0px 0px 10px; line-height:25px;}
        .selected{background-image: url('img/selected-focus-item.png');}
        .selected a {color:white;  text-shadow: 0px 1px 0px #3b6790; text-decoration:none;}
        .project-list-items > .selected{background-image: url('img/selected-project-list-item.png');}        
        .project-list{}

div.main-nav h4, div.project-list h4{ 
    font-family: Arial black, "MS Trebuchet", sans-serif;
    color: #233544;
    text-shadow: 0px 1px 1px White;    
    font-weight:bold; 
    font-size:11px; padding: 0px 0px 0px 10px;}

#right-conteiner{
    margin-left:221px; 
    margin-top:0px;
    }
    
#left-wrapper{ width: 300px; float:left; background-color: #e2e2e2; }
#right-wrapper{ margin:0 0 0 300px; }
#footer{ clear: both; }


/* Header -----------------------------------------------------*/
#logo{ padding:10px 0px 0px 11px;}
.header-bar-left {
    width: 222px;
    height: 100%;
    position:absolute;
    left: 0;
    top: 0;
    background:url('img/header-separate.png') no-repeat right bottom;
    }
.header-bar-center{
    width: 400px;
    height: 100%;
    position:absolute;
    left: 223px;
    top: 0;
    }  
.add-task-btn-conteiner{
    height: 100%;
    padding: 3px 0px 0px 10px ;
    }  
.add-task-btn{
    background-image: url('img/new-task-btn.png');
    background-repeat: no-repeat;
    outline: none;
    position: absolute;
    text-indent: -99999px;            
    height:30px;
    width:79px;
    margin:3px 0px 0px 0px;
    background-position: 0px 0px;
    }
.pressed{ background-position: 0px -30px !important;}

.clear-task-btn{
    background-image: url('img/clear-task-btn.png');
    background-repeat: no-repeat;
    outline: none;
    position: absolute;
    text-indent: -99999px;            
    height:30px;
    width:79px;
    margin-top:3px;
    background-position: 0px 0px;
}

.settings-btn{
    background-image: url('img/btn-settings.png');
    background-repeat: no-repeat;
    outline: none;
    position: absolute;
    text-indent: -99999px;            
    height:30px;
    width:35px;
    background-position: 0px 0px;
    top: 6px;
    right: 11px;
}
.task-main-action-bar{
    padding: 3px 0px 0px 0px;
    float:right;
    width: 44px;
    }
#account-inf{ float:right; width: 100px; color: #fff;}

.search-container{
    float:right;
    background: url('img/header-separate.png') no-repeat left bottom;
    height:100%;
    width:260px;
}
.search-box{
    width:225px;
    height:23px;
    border-radius:20px;
    border: 1px solid #143154;
    margin: 8px 10px 10px 12px;
    padding-left: 10px;
    box-shadow: 0px 1px 0px #727d98;
    font-size: 11px;
}
/* Menu */    

/* Left ------------------------------------------------------*/
.footer-side-bar{
    height:39px;
    width:100%;
    position: absolute;
    bottom:34px;
    background-image: url('img/statusbar-back.png');
}
.side-bar-pressed{
    background-image: url('img/statusbar-back-pressed.png');
    border-top: 1px solid #9D9FA5;   
}
.footer-side-bar ul li{
    width:24px;
    height:40px;
    float:left;
    border-right: 1px solid #9d9fa5;
}

.f-side-bar-hide, .f-side-bar-add{
    padding:5px 5px 1px 5px;
    margin: 3px 0px 0px 0px;
    width:11px;
    height:11px;
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    outline: none;
    position: absolute;
    text-indent: -99999px;
    cursor:pointer;
}
.f-side-bar-hide{ background-position: -47px -55px; }
.f-side-bar-add{ background-position: -46px -42px; }

/* Right ------------------------------------------------------*/
#main-content{
    border-bottom: #888;
    border-right: 1px solid black;
    width:100%;
    float: left;
    background-color:#ebedf2;
    margin-top: -1px;
    border-top: 1px solid black;
 
    }
.main-content-radius{ border-radius:0px 8px 0px 0px; }

/* Task details */
#task-details{
    display: none;
    float: left;
    width: 31%;
    background-color: white;
    margin-top: 10px;
    border-radius: 0px 7px 7px 0px;
    margin-left: 0px;
    border: 1px solid black;
    border-left: none;
    z-index: 9999;
}
.task-details-header{
    padding: 2px 0px 0px 3px;
    position: relative;
    height:25px;
    margin-top:0px;
    border-radius: 0px 7px 0px 0px;
    border-bottom: 1px solid #b9bbc0;    
    background-image: linear-gradient(bottom, rgb(203,208,215) 0%, rgb(222,225,228) 50%, rgb(233,234,237) 50%, rgb(255,255,255) 94%);
    background-image: -o-linear-gradient(bottom, rgb(203,208,215) 0%, rgb(222,225,228) 50%, rgb(233,234,237) 50%, rgb(255,255,255) 94%);
    background-image: -moz-linear-gradient(bottom, rgb(203,208,215) 0%, rgb(222,225,228) 50%, rgb(233,234,237) 50%, rgb(255,255,255) 94%);
    background-image: -webkit-linear-gradient(bottom, rgb(203,208,215) 0%, rgb(222,225,228) 50%, rgb(233,234,237) 50%, rgb(255,255,255) 94%);
    background-image: -ms-linear-gradient(bottom, rgb(203,208,215) 0%, rgb(222,225,228) 50%, rgb(233,234,237) 50%, rgb(255,255,255) 94%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(203,208,215)),
        color-stop(0.5, rgb(222,225,228)),
        color-stop(0.5, rgb(233,234,237)),
        color-stop(0.94, rgb(255,255,255))
    );
}
    .task-details-header p{
        width:100px;
        font-family: Arial, "MS Trebuchet", sans-serif;
        font-size: 14px;
        font-weight: bold;
        color:#282a2c;
        text-shadow: 0px 1px 1px White;
        margin: 5px 0px 0px 5px;
    }
    .task-details-hide, .task-details-hide:hover{
        margin: 7px 8px 0px 0px;
        width:15px;
        height:15px;
        background-image: url('img/ui-set.png');
        background-repeat: no-repeat;
        background-position: -170px -18px;
        outline: none;
        position: absolute;
        text-indent: -99999px;
        top:0px;
        right:0px;        
    }
    .task-details-hide:hover{
        background-position: -170px -32px;       
    }    

.task-details-body{
    padding: 5px 10px 15px 10px;
}
.tdb-name-wrapper{
    position: relative;
}
.tdb-name-wrapper>.checkbox{
    left:0px;
    top:8px;
}
.tdb-name{
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-size: 18px;
    font-weight: bold;
    padding: 6px 0px 0px 28px;
}
.tdb-description,.tdb-project,.tdb-date{
    padding: 14px 0px 0px 28px;
    position: relative;
}
.tdb-description{

}
.tdb-project{

}
.tdb-project-ico, .tdb-date-ico, .tdb-description-ico{
    width:15px;
    height:18px;
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    outline: none;
    position: absolute;
    text-indent: -99999px;
    top:14px;
    left:3px;   
}
    .tdb-description-ico{ background-position: -136px -18px; }
    .tdb-project-ico{ background-position: -118px -18px; }
    .tdb-date-ico{ background-position: -153px -18px; }


.tdb-project-name{
    font-family: Arial, "MS Trebuchet", sans-serif;
    text-shadow: 0px 1px 0px ##E4EEF3;
    margin: auto;
    position: absolute;
    padding: 1px 6px;
    border-radius: 11px;
    border: 1px solid #0ea3e8;
    background-color: #a4a4a4;
    background-image: linear-gradient(bottom, rgb(202,228,247) 100%, rgb(161,210,233) 0%);
    background-image: -o-linear-gradient(bottom, rgb(202,228,247) 100%, rgb(161,210,233) 0%);
    background-image: -moz-linear-gradient(bottom, rgb(202,228,247) 100%, rgb(161,210,233) 0%);
    background-image: -webkit-linear-gradient(bottom, rgb(202,228,247) 100%, rgb(161,210,233) 0%);
    background-image: -ms-linear-gradient(bottom, rgb(202,228,247) 100%, rgb(161,210,233) 0%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(202,228,247)),
        color-stop(0, rgb(161,210,233))
    );    
}

.tdb-date{

}

/* Task */
.task-tab{
    height:21px; 
    line-height: 22px; 
    padding: 0px 0px 0px 10px;
    color: black; 
    background-image: linear-gradient(bottom, rgb(255,255,255) 100%, rgb(218,218,218) 0%);
    background-image: -o-linear-gradient(bottom, rgb(255,255,255) 100%, rgb(218,218,218) 0%);
    background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 100%, rgb(218,218,218) 0%);
    background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 100%, rgb(218,218,218) 0%);
    background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 100%, rgb(218,218,218) 0%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(255,255,255)),
        color-stop(0, rgb(218,218,218))
    );
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #a4a4a4;
    border-left: 1px solid #fff;
    
    cursor:pointer;
    color: #777;
    text-transform: uppercase;
    font-weight:bold;
    text-shadow: 0px 1px 0px #F5F5F5;
    }
.task-list{box-shadow: 0px 1px 3px #637081;}
li.task:not(:last-of-type){border-bottom:1px solid #d9dde0;}
.task{
    height:34px;
    margin-top:0px; 
    margin-bottom:0px; 
    position: relative; 
    background-color:#fff;
    cursor: pointer;
    }
.task-selected{
    background-image: linear-gradient(bottom, rgb(81,212,245) 100%, rgb(3,36,128) 0%);
    background-image: -o-linear-gradient(bottom, rgb(81,212,245) 100%, rgb(3,36,128) 0%);
    background-image: -moz-linear-gradient(bottom, rgb(81,212,245) 100%, rgb(3,36,128) 0%);
    background-image: -webkit-linear-gradient(bottom, rgb(81,212,245) 100%, rgb(3,36,128) 0%);
    background-image: -ms-linear-gradient(bottom, rgb(81,212,245) 100%, rgb(3,36,128) 0%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgb(81,212,245)),
        color-stop(0, rgb(3,36,128))
    );    
}    
.complete{ margin-top:0px; background-color:#edeff0;}
.task a{ color: #191919; }
.complete a{ color: #9e9e9e; }
.checkbox{ position:absolute; top: 8px; left:17px;}

.sortable-cont{ }
.description-ico{
    margin: 9px 0 0 7px;
    width:10px;
    height:15px;
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    background-position: -19px -40px;
    outline: none;
    position: absolute;
    text-indent: -99999px;    
    }
.sortable{
    margin: 12px 0 0 4px;
    width:10px;
    height:15px;
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    background-position: 0px -43px;
    outline: none;
    position: absolute;
    text-indent: -99999px;
    }
.task-checkbox, .task-checkbox-completed{width:22px; height:20px;}
.task-checkbox{
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    outline: none;
    position: absolute;
    text-indent: -99999px;
    }
.task-checkbox-completed{
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    background-position: 0px -21px;
    outline: none;
    position: absolute;
    text-indent: -99999px;
    text-decoration:line-through;
    }    
.overdue{ color: Red; }    
.today{ color: #F7C623; }    
.task-content{ margin: 0 0 0 45px; line-height: 35px;} 
.task-actions{ position: absolute; right: 0px; top: 5px; }
.task-actions li { float: left; padding: 0px 8px 0px 0px; margin: 8px 0px 0px 0px; }
.task-actions li:first-of-type{font-size:10px; line-height: 9px; color:#999;}
.task-actions li:not(:first-of-type){width:17px;}
.task-actions li a{text-decoration:none;}
.delete-task{cursor:pointer;}

.edit-task-link, .delete-task, .flag, .noflag{
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    outline: none;
    text-indent: -99999px;
    padding: 0px 8px 0px 0px;
}
.edit-task-link{background-position: 0px -72px;}
.edit-task-link:hover{background-position: 0px -58px;}
.delete-task{background-position: -19px -72px;}
.delete-task:hover{background-position: -19px -58px;}
.noflag{background-position: -38px -72px;}
.noflag:hover{background-position: -38px -58px;}
.flag{background-position: -38px -44px;}

.other-notes{
    font-family: Arial, "MS Trebuchet", sans-serif;    
    color: #a1a1a1;
    font-style: italic;
}

/* Projects */
.project-list-items{margin: 5px 0px 0px 0px;}

.project-list-items li{
    height: 21px;
    line-height: 22px;
    padding: 0px 0px 0px 10px;    
    }
    
.project-list-action{
    padding: 0px 0px 0px 18px;
    }
        
.project-list-ico, .project-list-ico-activ{
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    outline: none;
    position: absolute;
    text-indent: -99999px;            
    height:17px;
    width:14px;
    margin-top:3px;
    }
.project-list-ico{
    background-position: -124px 1px;
    }
.project-list-ico-activ{
    background-position: -138px 1px;    
    }
.list-settings-ico{
    background-color:transparent;
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    outline: none;
    text-indent: -99999px;
    height: 11px;
    width: 10px;
    margin: 6px 7px 0px 0px;
    float: right;
    background-position: -190px -12px;
    cursor: pointer;
    display:none;
    box-shadow:none;
    }
.list-settings-ico:hover{
    background-position: -190px 0px;    
    }
.project-list-items li:hover > .list-settings-ico{display:block;}    
.selected .list-settings-ico {background-position: -190px -35px;}
.selected .list-settings-ico:hover {background-position: -190px -23px; }
#list-settings-conteiner{
    border: 1px solid #666;
}
#list-settings-conteiner li {
    padding: 4px 0px 4px 12px;
    cursor: pointer;
}
#list-settings-conteiner li:hover {
    background-color: #d9e5f5;    
}


.tool-trip{
    position:absolute;
    display: none; 
    z-index: 2;
    background-color:White;
    box-shadow: 0px 0px 7px #627180;
    border-radius: 5px;
    padding: 8px 0px;
    width: 140px; 
}




/* Conteiner */

.calendar-month{ position:absolute; width: 100%; min-width: 810px; height: 100%; position: absolute;}
.calendar-month-inner{ position:absolute; height: 100%; }
.calendar {height: 100%; width: 100%; position:relative; background-color: #fff;}
.calendar td {border-right:solid 1px #f1f1f1; border-bottom:solid 1px #f1f1f1;}
.cal-empty, .cal-day{height: 16.666666%; width: 14.285714%;}


/*login page*/
.login-form
{
    width:380px;
    margin: 100px auto;
    box-shadow:0px 1px 4px #666;
    border-radius:5px;
    padding:17px 54px 35px 40px;
    background:url('img/login-form-back.png') repeat-x bottom;
    }
.login-form h2 {text-align: center; margin: 5px 0px 20px 0px;}
.login-form p
{
    margin: 10px 0px;
    }
.login-form input[type="text"], .login-form input[type="password"]
{
    padding: 0px 7px;
    width:100%;
    height: 30px;
    border-radius:4px;
    border: 1px solid #b3bfc4;
    }
.login-form input[type="text"]:focus, .login-form input[type="password"]:focus 
{
    border: 1px solid #369eff;
    box-shadow:0px 0px 3px #86bff4;
    }
.login-form ul {margin: 13px 0px 25px 0px; width:400px;}
.login-form ul li{float:left;}
.login-form ul li+li{margin:10px 0px 5px 15px;}
.login-form ul li+li+li{margin:9px 0px 5px 5px;}
.login-form ul li+li+li+li{float:right; margin:9px 5px 5px 0px;}

.btn-blue{
    background-image:url('img/btn-blue.png');
    border:none;
    width: 90px;
    height: 32px;
    color: White;
    cursor:pointer;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0px 1px 0px #102A45;
}
.btn-blue:hover{
    background-image:url('img/btn-blue-hover.png');
    }
.field-validation-error{color: #db3a15;}
    
    
/*modal forms*/
/* Z-index of #mask must lower than #boxes .window */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
}
   
.boxes .window {
    position:absolute;
    width:440px;
    display:none;
    z-index:9999;
    background-color: white;
    border: 1px solid black;
    border-radius: 6px;
    box-shadow: 0px 0px 23px black;    
}
.form-header{
    height:36px;
    background: #121212 url('img/form-header-gradient.png') repeat-x top;
    border-radius: 5px 5px 0px 0px;
    border-top: 1px solid #777;
    }
.form-title{
    margin: auto;
    width: 100%;
    position: absolute;
    text-align: center;
    height: 36px;
    font-size: 14px;
    color: white;
    line-height: 36px;
    font-weight: bold;
    text-shadow: 0px 1px 0px black;
    z-index:0;   
    }    
.form input[type="text"], 
.form select, 
.form textarea
{
    width: 432px;
    height: 29px;
    border: none;
    border-bottom: 1px solid #d5d5d5;
    border-top: 1px solid #d5d5d5;
    padding: 0px 0px 0px 8px;
    background-color: White;
    font-size: 11px;
    }
.form input[type="text"]:focus, 
.form textarea:focus,
.form select:focus
{
    background-color: #eff4f7;
    border-right:none;
    border-left:none;
    }
.form select{
    border: none;
    width: 439px;
    padding: 2px 0px 0px 25px;
    }
.add-task-date{
    width: 412px !important;
    padding: 0px 0px 0px 28px !important;
    }          
.form textarea{
    border: none;
    border-radius: 0px 0px 6px 6px;
    padding-top: 5px;
    min-height: 67px;
    max-height: 67px;
    min-width: 432px;
    max-width: 432px;
    }
.task-form-list-ico{
    margin: 9px 0 0 5px;
    width:15px;
    height:15px;
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    background-position: -153px -1px;
    outline: none;
    position: absolute;
    text-indent: -99999px;    
    }
.task-form-date-ico{
    margin: 8px 0 0 5px;
    width:19px;
    height:15px;
    background-image: url('img/ui-set.png');
    background-repeat: no-repeat;
    background-position: -169px -1px;
    outline: none;
    position: absolute;
    text-indent: -99999px;    
    }

.btn-black-small, .btn-blue-small, .btn-red-small{
    background-repeat: no-repeat;
    background-color:transparent;
    border:none;
    margin: 5px 0px 0px 5px;
    height:25px;
    width:63px;
    color:White;
    font-size: 11px;
    font-weight:bold;
    text-shadow: 0px 1px 0px Black;
    cursor:pointer;
    z-index:1;
    }
.btn-black-small{
    background-image: url('img/btn-black-small.png');
    position: absolute;
    float:left;
    }
.btn-blue-small{
    background-image: url('img/btn-blue-small.png');
    margin: 5px 5px 0px 0px;    
    float:right;
    position: relative;
    }
.btn-red-small{
    background-image: url('img/btn-red-small.png');
    margin: 5px 5px 0px 0px;    
    float:right;
    position: relative;
    }        
.btn-black-small:hover, .btn-blue-small:hover, .btn-red-small:hover{
    color:White;
    text-decoration:none;    
    }
.btn-black-small:active, .btn-blue-small:active, .btn-red-small:active{
    color:White;
    text-decoration:none;    
    background-position: 0px -25px;
    }
.empty { color: #a9a9a9; } 
 
/* Customize your modal window here, you can add background image too */
.boxes #dialog {
  width:375px; 
  height:203px;
}




#confirmOverlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background:url('ie.png');
    background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
    z-index:100000;
}

#confirmBox{
    width:460px;
    position:fixed;
    left:50%;
    top:50%;
    margin:-130px 0 0 -230px;
    border: 1px solid black;
    border-radius: 5px;
}

.confirm-body{
    background-color: White;
    padding: 10px 20px 15px;
    border-radius: 0px 0px 5px 5px;
}

.nano .content{ 
    padding: 0px;
    position: absolute; 
}
.nano .pane         { background: #444; }
.nano .pane .slider { background: #111; }